<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <h1>
    <span class="label label-info">DEMO 3</span>
  </h1>
  <br>
  <br>
  <br>
  <div class="well" id="well">

  </div>

  <script src="js/jquery.min.js"></script>
  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/browser.min.js"></script>

  <script type="text/babel">
    // 在ES6之前，如果你使用 createReactClass() , 你需要再提供一个 getInitialState 方法返回初始的state： 
    // var Text = React.createClass({
    //     getInitialState: function() { ... },
    //     render: function() { ... }
    // });

    // 使用ES6之后，我们能在构造器(constructor)中初始化state：
    class Text extends React.Component {
      constructor(props) {
        super(props)
        this.state = { 
          name1: props.name1,
          age1: props.age1
        }
      }

      render() {
        return (
          <div>
            <div className='dataFromProps'>我是{this.props.name},今年{this.props.age}岁。</div>
            <div className='dataFromState'>我是{this.state.name1},今年{this.state.age1}岁。</div>
          </div>
        )
      }
    }

    const textEle = <Text name="张无忌" age="101" name1="张三丰" age1="102"/>     
    ReactDOM.render(
        textEle,
        document.getElementById('well')
    )
  </script>
</body>
</html>